<template>
  <div>
    <h1>1.动态dyNameIc组件使用</h1>
    <button @click="componentName = 'UserInfo'">账号密码填写</button>
    <button @click="componentName = 'UserName'">个人信息填写</button>
    <div class="area" style="border: 1px solid red">
      <keep-alive>
        <component :is="componentName"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import UserInfo from "../components/UserInfo";
import UserName from "../components/UserName";
export default {
  name: "ActiveApp",
  components: {
    UserInfo,
    UserName,
  },
  data() {
    return {
      componentName: "UserInfo",
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
</style>